<template>
    <div>
        <MenuMain mode="horizontal" v-bind="menuAttrs" />
    </div>
</template>

<script>
import { mapState } from 'vuex';
import MenuMain from './menu.vue';
import { themeGroup } from '@/components/themeMode/theme.js';
const themeMap = {};
themeGroup.forEach(item => {
    themeMap[item.value] = item.color
})

const MENUTHEME = {
    dark: {
        backgroundColor: themeMap.dark,
        textColor: "#FFFFFF",
        activeTextColor: "#FFFF01",
    },
    bright: {
        backgroundColor: themeMap.bright,
        textColor: "#303133",
        activeTextColor: "#409EFF",
    },
    blue: {
        backgroundColor: themeMap.blue,
        textColor: "#FFFFFF",
        activeTextColor: "#FFFF01",
    },
    lightDark: {
        backgroundColor: themeMap.lightDark,
        textColor: "#FFFFFF",
        activeTextColor: "#FFFF01",
    }
}

export default {
    components: { MenuMain },
    computed: {
        ...mapState(['settings']),
        menuAttrs() {
            const { themeMode } = this.settings;
            if(themeMode && MENUTHEME[themeMode]) {
                return MENUTHEME[themeMode]
            } else {
                return MENUTHEME['dark']
            }
        },
    },
}
</script>

<style>

</style>